<script setup>
import Card from './Card.vue'
import { getComment, addComment } from '@/api/wall'
import { feedback } from "@/api/wall"
import { ref, onMounted, watch, getCurrentInstance } from 'vue'
import { useUserStore } from '@/store/user'
import dayjs from 'dayjs'
import { portrait } from "@/utils/data"

// 封装的全局消息提示
const { proxy } = getCurrentInstance()
const $YiKeMessage = proxy.$YiKeMessage

const userStore = useUserStore()
const props = defineProps({
    detail: Object
})


// 获取评论
const commentList = ref([])
const getCommentList = () => {
    const data = {
        page: 1,
        pagesize: 100,
        id: props.detail.id
    }
    getComment(data).then(res => {
        commentList.value = res.result
    })
}
onMounted(() => getCommentList())

// 发表评论
const data = ref({
    wallId: props.detail.id,
    userId: userStore.ip,
    imgurl: Math.floor(Math.random() * 14),
    moment: dayjs().format('YYYY/MM/DD HH:mm'),
    comment: '',
    name: ''
})
const submitComment = () => {
    if (data.value.comment.trim() == '') return
    if (data.value.name.trim() == '') {
        data.value.name = '匿名'
    }
    addComment(data.value).then(res => {
        getCommentList()
        props.detail.comcount[0].count++
    })
    data.value.comment = ''
    data.value.name = ''
}

watch(
    () => props.detail.id,
    (newId, oldId) => {
        data.value.wallId = newId
        data.value.comment = ''
        data.value.name = ''
        getCommentList()
    }
)

// 反馈
const doFeedBack = (type) => {
    const data = {
        wallId: props.detail.id,
        userId: userStore.ip,
        type,
        moment: dayjs().format('YYYY/MM/DD HH:mm')
    }
    if (props.detail.report[0].count > 0 && props.detail.revoke[0].count > 0) {
        return $YiKeMessage({ message: '你已经进行了一次反馈', type: 'warning' })
    }
    feedback(data).then(res => {
        $YiKeMessage({ message: res.message, type: 'success' })
        if (type == 1) {
            props.detail.report[0].count++
        } else {
            props.detail.revoke[0].count++
        }
    })
}

</script>

<template>
    <div class="modal-body">
        <div class="author-tip">
            <span class="tip1" @click="doFeedBack(2)">要墙主撕下该标签</span>
            <span class="tip2" @click="doFeedBack(1)">举报</span>
        </div>
        <div class="card-detail">
            <Card :i="detail" />
        </div>
        <div class="submitComment">
            <textarea placeholder="评论..." maxlength="40" v-model="data.comment"></textarea>
            <div class="inputComment">
                <input type="text" placeholder="签名" v-model="data.name">
                <div class="btn" @click="submitComment">评论</div>
            </div>
        </div>
        <div class="comment-list">
            <div class="comment">
                <div class="commentCount">评论 {{ detail.comcount[0].count }}</div>
                <div class="commetn-scroll">
                    <div class="commentContent" v-for="comment in commentList">
                        <div class="user-header" :style="{background: portrait[comment.imgurl]}"></div>
                        <div class="right">
                            <div class="user-name">
                                <p class="name">{{ comment.name }}</p>
                                <p class="time">{{ comment.moment }}</p>
                            </div>
                            <p class="content">{{ comment.comment }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.modal-body {
    margin-top: 22px;
    font-size: 14px;

    .author-tip {
        .tip1 {
            color: #3b73f0;
            margin-right: 30px;
            cursor: pointer;
        }

        .tip2 {
            color: #ff9e55;
            cursor: pointer;
        }
    }

    .card-detail {
        margin-top: 10px;
    }

    .submitComment {
        font-size: 14px;
        margin-top: 10px;
        color: #202020;

        textarea {
            width: 100%;
            height: 56px;
            border: 1px solid #949494;
            padding: 8px;
            box-sizing: border-box;
            outline: none;
            resize: none;
        }

        .inputComment {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;

            input {
                width: 200px;
                height: 32px;
                line-height: 32px;
                border: 1px solid #949494;
                padding-left: 8px;
                box-sizing: border-box;
            }

            .btn {
                width: 80px;
                height: 32px;
                background: #202020;
                border-radius: 18px;
                color: #fff;
                display: inline-block;
                text-align: center;
                line-height: 32px;
                cursor: pointer;
            }
        }

    }

    .comment-list {
        .comment {
            margin-top: 20px;

            .commentCount {
                font-weight: 600;
            }

            .commetn-scroll {
                overflow: auto;
                height: 360px;

                .commentContent {
                    width: 100%;
                    margin-top: 20px;
                    display: flex;

                    .user-header {
                        border-radius: 50%;
                        width: 28px;
                        height: 28px;
                        background: linear-gradient(180deg, #7BE7FF, #1E85E2);
                        margin-right: 8px;
                    }

                    .right {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        width: 284px;

                        .user-name {
                            display: flex;
                            align-items: center;

                            .name {
                                margin-right: 5px;
                                font-weight: 700;
                            }

                            .time {
                                font-size: 12px;
                                color: #949494;
                            }
                        }
                        .content {
                            font-size: 12px;
                        }
                    }
                }
            }


        }
    }
}
</style>